<template>
	<view class="stock">
		<view class="swiper_item dis_wrap">
			<view class="swiper_item_tags dis_column_center" v-for="child in menus" :key="child.value" @click="cteateAction(child)">
				<view class="icon_box">
					<uni-icons :type="child.value" custom-prefix="iconfont" :size="22" :color="menuChecked === child.value ? '#fe674a' : '#333'"></uni-icons>
				</view>
				<text class="fs26 mt15">{{ child.text }}</text>
			</view>
		</view>
		<canvas id="myCanvas" canvas-id="myCanvas" style="height: calc(100vh - 184rpx);width: 100vh;"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menus: [
					{ text: '干饭', value: 'icon-chihe' }
				],
				menuChecked: 'icon-chihe',
				options: [
					{ text: '黄焖鸡', image: '' },
					{ text: '石锅拌饭', image: '' }
				]
			}
		},
		onReady() {
			this.getCanvasSize().then(res => {
				this.cooked(res)
			})
		},
		methods: {
			cteateAction(item) {
				this.menuChecked = item.value
			},
			getCanvasSize() {
				return new Promise((resolve ,reject) => {
					uni.createSelectorQuery()
					.in(this)
					.select('#myCanvas')
					.fields({ size: true }, (res) => {
						resolve(res)
					})
					.exec();
				})
			},
			cooked(options) {
				console.log('111', options);
				const ctx = uni.createCanvasContext('myCanvas')
				const round = 60
				const round1 = 120
				const width = 150
				const height = 200
				const minX = Math.floor(options.width / 2)
				const minY = Math.floor(options.height / 2)
				console.log(minX, minY);
				ctx.beginPath()
				ctx.arc(minX - round1, minY, round1, 0, 2 * Math.PI)
				ctx.setStrokeStyle('#000')
				ctx.stroke()

				
				ctx.draw()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper_item {
		height: 184rpx;
		.swiper_item_tags {
			width: 150rpx;
			padding: 18rpx 0;
			.icon_box {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #ebebeb;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
</style>